<template>
<div class="box">
  <div class="text">
    <div class="title">科协软件组管理系统</div>
    <div class="info">
      西安理工大学大学生科技协会，简称西理科协、校科协、大学生科协(英文全称：XUTStudent Association for Science and Technology，缩写为XSAST),是在我校校团委和大学生创新创业中心双重领导下的校级学生组织，是全校最大的科技类学生组织。
    </div>
  </div>
  <img src="../assets/bg1.png" alt="">
</div>
  <div  class="box">
    <img src="../assets/bg2.jpeg" alt="">
    <div class="text">
      <div class="title" style="color: #5e7ce0">软件组主页</div>
      <div class="info">用户中心、信息通知、作业分析、图标统计……</div>
        <tiny-button type="primary" plain @click="go"> 点击进入 </tiny-button>
    </div>
  </div>
  <div  class="box">

    <div class="text" style="width:20vw;margin-right: 0">
      <div class="title" style="color: #50d4ab;"> 挑战杯</div>
      <div class="info">技术论坛、匹配队友、报名参赛</div>
        <tiny-button type="success" plain> 点击进入 </tiny-button>
    </div>
     <img src="../assets/bg3.jpeg" alt="">
  </div>
  <img src="../assets/bg4.jpeg" alt="" class="btm">

</template>

<script setup>
import { Button as TinyButton} from '@opentiny/vue'
import {useRouter} from "vue-router";
const router = useRouter();
const go = ()=>{
  router.push("/home")
}

</script>

<style scoped lang="less">
.title{
  color: #303133;
  font-size: 20px;
  letter-spacing: 2px;
  margin:10px 0;
}
.info{
  font-size:14px;
  color:#606266;
  letter-spacing: 1px;
  line-height: 30px;
}
.box{
  display: flex;
  flex-direction: row;
  padding: 20px;
  justify-content: center;
  align-items: center;

}
img{
  width: 30vw;
}
.text{
  width: 39vw;
  margin: 20px;
}
button{
  margin-top:20px;
}
.btm{
 position: absolute;
  left:50%;
  transform: translateX(-50%);
}
</style>